<template>
    <view style="height: 100%">
        <l-popup :show="showClone" animation="show" contentAlign="center" :locked="true" @lintap="onDialogTap" l-bg-class="l-bg-class" :z-index="zIndex">
            <view class="dialog-container l-class" :style="'margin-bottom:' + distance + 'px'">
                <view class="dialog-title l-title-class" :style="'color:' + titleColor" v-if="showTitleClone">{{ titleClone }}</view>
                <view class="dialog-content l-content-class" :style="'color:' + contentColorClone">
                    <slot />
                    {{ content }}
                </view>
                <view class="dialog-btn-group">
                    <view
                        class="dialog-btn-cancel l-cancel-class"
                        :style="'color: ' + cancelColorClone"
                        @tap.stop.prevent="onCancelTap"
                        :hover-class="isHover ? 'group-hover' : ''"
                        v-if="typeClone === 'confirm'"
                    >
                        {{ cancelTextClone }}
                    </view>
                    <view
                        class="dialog-btn-confirm l-confirm-class"
                        :style="'color: ' + confirmColorClone"
                        :hover-class="isHover ? 'group-hover' : ''"
                        @tap.stop.prevent="onConfirmTap"
                    >
                        {{ confirmTextClone }}
                    </view>
                </view>
            </view>
        </l-popup>
    </view>
</template>

<script>
import lPopup from '../popup/index';
import computeOffset from '../behaviors/computeOffset';
import zIndex from '../behaviors/zIndex';
import hover from '../behaviors/hover';
import validator from '../behaviors/validator';
export default {
    data() {
        return {
            success: null,
            fail: null,
            zIndex: 0,
            distance: '',
            titleClone: '',
            isHover: false,
            cancelTextClone: '',
            confirmTextClone: '',
            showClone: '',
            showTitleClone: '',
            contentColorClone: '',
            cancelColorClone: '',
            typeClone: '',
            confirmColorClone: ''
        };
    },
    mixins: [computeOffset, zIndex, hover, validator],
    externalClasses: ['l-class', 'l-title-class', 'l-content-class', 'l-confirm-class', 'l-cancel-class', 'l-bg-class'],
    props: {
        show: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: 'alert',
            options: ['alert', 'confirm']
        },
        title: {
            type: String,
            default: '提示'
        },
        showTitle: {
            type: Boolean,
            default: true
        },
        content: {
            type: String,
            default: ''
        },
        locked: {
            type: Boolean,
            default: true
        },
        confirmText: {
            type: String,
            default: '确定'
        },
        confirmColor: {
            type: String,
            default: '#3683d6'
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        cancelColor: {
            type: String,
            default: '#45526b'
        },
        titleColor: String,
        contentColor: {
            type: String,
            default: 'rgba(89,108,142,1)'
        },
        openApi: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            if (this.openApi) {
                this.initDialog();
            }
        },

        initDialog() {
            uni.lin = uni.lin || {};
            uni.lin.showDialog = (t) => {
                const {
                    type: e = 'alert',
                    title: o = '提示',
                    showTitle: l = true,
                    content: s = '',
                    locked: a = true,
                    confirmText: i = '确定',
                    contentColor: n = 'rgba(89,108,142,1)',
                    cancelColor: c = '#45526b',
                    cancelText: r = '取消',
                    confirmColor: h = '#3683d6',
                    success: p = null,
                    fail: m = null
                } = t;
                this.setData({
                    typeClone: e,
                    titleClone: o,
                    showTitleClone: l,
                    contentClone: s,
                    lockedClone: a,
                    confirmTextClone: i,
                    cancelColorClone: c,
                    cancelTextClone: r,
                    confirmColorClone: h,
                    contentColorClone: n,
                    showClone: true,
                    fail: m,
                    success: p
                });
                return this;
            };
        },

        onConfirmTap() {
            const { success: t } = this;
            if (t) {
                t({
                    confirm: true,
                    cancel: false,
                    errMsg: 'showDialog: success'
                });
            }
            this.setData({
                showClone: !this.showClone
            });
            this.$emit(
                'linconfirm',
                {
                    detail: 'confirm'
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },

        onCancelTap() {
            const { success: t } = this;
            if (t) {
                t({
                    confirm: false,
                    cancel: true,
                    errMsg: 'showDialog: success'
                });
            }
            this.setData({
                showClone: !this.showClone
            });
            this.$emit(
                'lincancel',
                {
                    detail: 'cancel'
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },

        onDialogTap() {
            if (true !== this.lockedClone) {
                this.setData({
                    showClone: !this.showClone
                });
            }
            this.$emit(
                'lintap',
                {
                    detail: true
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },
    created: function () {}
};
</script>
<style>
.dialog-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 520rpx;
    background: #fff;
    border-radius: 12rpx;
}
.dialog-title {
    font-size: 32rpx;
    font-family: PingFangSC-Regular;
    color: #45526b;
    line-height: 44rpx;
    margin-top: 30rpx;
    padding: 0 25rpx;
    text-align: center;
}
.dialog-content {
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    line-height: 40rpx;
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 25rpx;
}
.dialog-btn-group {
    width: 100%;
    height: 80rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.dialog-btn-cancel {
    font-size: 28rpx;
    height: 80rpx;
    width: 259rpx;
    border-right: 2rpx solid #f3f3f3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 2rpx solid #f3f3f3;
}
.dialog-btn-confirm {
    font-size: 28rpx;
    flex: 1;
    color: #3963bc;
    height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 2rpx solid #f3f3f3;
}
.active {
    color: #3683d6;
}
.leave {
    color: #45526b;
}
.group-hover {
    opacity: 0.8;
}
</style>
